import React, {useEffect, useMemo, useState} from 'react';
import {
  View,
  StyleSheet,
  ViewProps,
  processColor,
  Alert,
  ViewStyle,
} from 'react-native';
import {
  LineChart,
  LineDataset,
  LineDatasetConfig,
} from 'react-native-charts-wrapper';
import moment from 'moment';

// 定义骨架屏组件的 props 类型
interface LineChartProps extends ViewProps {
  x?: string[];
  y?: number[];
  style?: ViewStyle;
}

const LHLLineChart: React.FC<LineChartProps> = ({x = [], y = [], style}) => {
  const dates: string[] = useMemo(
    () =>
      x.map((item: string) => {
        let date = moment(item).format('HH: mm');
        return date;
      }),
    [],
  );

  const config: LineDatasetConfig = useMemo(
    () => ({
      drawCircles: true,
      circleColor: processColor('#EC6F22'),
      circleHoleColor: processColor('#EC6F22'),
      circleRadius: 5,
      lineWidth: 2,
      color: processColor('#8EC5CA'),
      drawValues: false,
      //   visible: false,
      //   drawFilled: true,
    }),
    [],
  );

  let values: any[] = useMemo(
    () =>
      y.map((item: number) => ({
        y: item,
        marker: 'marker',
      })),
    [],
  );
  let dataSets: LineDataset[] = useMemo(
    () => [{values, config, label: ''}],
    [config, values],
  );

  function showMsg(arg0: string) {
    Alert.alert('点击回调，可根据业务拓展', arg0, [
      {
        text: '取消',
        onPress: () => console.log('Cancel Pressed'),
        style: 'cancel',
      },
      {text: '确定', onPress: () => console.log('OK Pressed')},
    ]);
  }

  return (
    <View style={[styles.container, style]}>
      <LineChart
        pinchZoom={true}
        style={styles.chart}
        scaleEnabled={true}
        scaleXEnabled={true}
        scaleYEnabled={true}
        highlightPerTapEnabled={true}
        highlightPerDragEnabled={false}
        doubleTapToZoomEnabled={false}
        onSelect={event => {
          let entry = event.nativeEvent;
          if (entry != null) {
            showMsg(JSON.stringify(entry));
          }
        }}
        onChange={event => console.log(event.nativeEvent)}
        legend={{
          enabled: false,
        }}
        animation={{
          durationX: 0,
          durationY: 600,
          easingY: 'EaseInOutQuart',
        }}
        xAxis={{
          enabled: true,
          position: 'BOTTOM',
          drawLabels: true,
          valueFormatter: dates,
          granularityEnabled: true,
          granularity: 1,
        }}
        yAxis={{
          left: {
            enabled: false,
          },
          right: {
            enabled: true,
          },
        }}
        data={{
          dataSets,
        }}
      />
    </View>
  );
};

const a = [
  {x: 'a', y: 2},
  {x: 'a', y: 2},
  {x: 'a', y: 2},
  {x: 'a', y: 2},
];

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  chart: {
    flex: 1,
    width: '100%',
  },
});

export default LHLLineChart;
